import * as echarts from 'echarts';
import "echarts-gl";
import axios from "axios";

export async function lineSzhcgslFn() {
  const alertList:any[] = [];
  let series:any = [];
  const res = await axios.post("http://localhost:8080/x8");
  const data = res.data.data;
  const xAxisData = data.names;
  const seriesData = data.values;
  series = [
    {
      name: '次数',
      type: 'line',
      data: seriesData,
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 4
      }
    }
  ]
  seriesData.forEach(() => {
    alertList.push(30);
  })
  series.push({
    name: '警戒值',
    type: 'line',
    data: alertList,
    smooth: true,
    showSymbol: false,
    lineStyle: {
      width: 4,
      type: 'dashed'
    }
  })
  const chart = echarts.init(document.querySelector('.chart-line-szhcgsl') as HTMLElement);
  chart.setOption({
    legend: {
      show: true,
      x: "center",
      y: 0,
      icon: "stack",
      itemWidth: 12,
      itemHeight: 6,
      itemGap: 50,
      textStyle: {
        color: "#D8DBDF",
        fontSize: 22
      },
      data: ['次数']
    },
    tooltip: {
      show: true,
      trigger: "axis",
      textStyle: {
        fontSize: 24,
      }
    },
    grid: {
      left: 50,
      right: 50,
      bottom: '6%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#384267",
        },
      },
      axisLabel: {
        fontSize: 18,
        color: '#D8DBDF'
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#384267',
          width: 1,
          type: 'dashed',
        },
        show: true,
      },
      axisLabel: {
        fontSize: 18,
        color: '#D8DBDF'
      }
    },
    series: series
  },true);
};

export function barSzhcgslFn() {
  const chart = echarts.init(document.querySelector('.chart-bar-szhcgsl') as HTMLElement);
  var data1 = [186, 169, 85, 60, 98, 572, 216, 42, 35, 32];
  const option = {
    grid: {
      left: "0",
      right: "20",
      top: 40,
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      data: [
        '设备',
        '营销',
        '安监',
        '人资',
        '调度',
        '数字化',
        '通信',
        '财务',
        '发策',
        '物资'
      ],
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#fff',
          fontSize: 18,
        },
        margin: 20, //刻度标签与轴线之间的距离。
      }
    },
    yAxis: {
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 18,
        },
      },
      splitLine: {
        lineStyle: {
          color: '#384267',
          width: 1,
          type: 'dashed',
        },
        show: true,
      },
    },
    series: [
      {//三个最低下的圆片
        "name": "",
        "type": "pictorialBar",
        "symbolSize": [24, 10],
        "symbolOffset": [-10, 5],
        "z": 12,
        itemStyle: {
          opacity: 1,
          color: function (params:any) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#12B9DB' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#6F8EF2'// 100% 处的颜色
            }], false)
          }
        },
        "data": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
      },
      //下半截柱状图
      {
        name: '2020',
        type: 'bar',
        barWidth: 24,
        barGap: '-100%',
        itemStyle: {//lenged文本
          opacity: .7,
          color: function (params:any) {
            return new echarts.graphic.LinearGradient(0, 0, 0.5, 0, [{
              offset: 0,
              color: '#0e9abe' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#1acaf0'// 100% 处的颜色
            }], false)
          }
        },

        data: data1
      },

      { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
        type: 'bar',
        barWidth: 45,
        barGap: '-100%',
        stack: '广告',
        itemStyle: {
          color: 'transparent'
        },
        data: data1
      },
      {
        "name": "",
        "type": "pictorialBar",
        "symbolSize": [24, 10],
        "symbolOffset": [-10, -5],
        "z": 12,
        itemStyle: {
          opacity: 1,
          color: function (params:any) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#0e9abe' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#1acaf0'// 100% 处的颜色
            }], false)
          }
        },
        "symbolPosition": "end",
        "data": data1
      }
    ]
  };
  chart.setOption(option);
}

export function fhsjcpslFn() {
  const chart = echarts.init(document.querySelector('.chart-fhsjcpsl') as HTMLElement);
  chart.setOption({
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    // visualMap: {
    //   show: false,
    //   min: 80,
    //   max: 600,
    //   inRange: {
    //     colorLightness: [0, 1]
    //   }
    // },
    series: [
      {
        animation: false,
        name: '背景层',
        type: 'pie',
        radius: ['0%', '70%'],
        center: ['35%', '45%'],
        label: {
          show: false
        },
        data: [
          {
            value: 5,
            itemStyle: {
              color: '#007eff0f',
              borderColor: "#007eff4b",
              borderWidth: 1
            }
          }
        ],
        silent: true // 背景层不响应事件
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: '60%',
        center: ['35%', '45%'],
        data: [
          { value: 310 },
          { value: 60 },
          { value: 30 },
          { value: 30 },
        ],
        roseType: 'radius',
        label: {
          show: false,
          color: 'rgba(255, 255, 255, 0.3)'
        },
        labelLine: {
          show: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        itemStyle: {
          color: function(params: any) {
            var colorList = ['#0084FF', '#37FFC9', '#FFD768', '#7CE4FE']; // 红绿蓝
            return colorList[params.dataIndex];
          },
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0)'
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx: any) {
          return Math.random() * 200;
        }
      },
      // {
      //   animation: false,
      //   name: '背景层',
      //   type: 'pie',
      //   radius: ['0%', '7%'],
      //   center: ['35%', '45%'],
      //   data: [
      //     {
      //       value: 5,
      //       itemStyle: {
      //         color: '#EBF1FF'
      //       }
      //     }
      //   ],
      //   silent: true
      // },
      {
        animation: false,
        name: '背景层',
        type: 'pie',
        radius: ['0%', '18%'],
        center: ['35%', '45%'],
        data: [
          {
            value: 5,
            itemStyle: {
              color: '#FFFFFF0f',
              borderColor: "#FFFFFF4b",
              borderWidth: 2
            }
          }
        ],
        silent: true
      }
    ]
  });
  return chart
};

export async function cflrsgzFn() {
  const res = await axios.post("http://localhost:8080/x10_v2");
  const data = res.data.data
  const names: any[] = []
  const values: any[] = []

  data.dtos.forEach((item:any)=>{
    names.push(getAbbreviationName(item.name))
    values.push(item.value)
  })
  const chart = echarts.init(document.querySelector('.chart-ycsjwzgx') as HTMLElement);

  const option = {
    grid: {
      left: "0",
      right: "20",
      top: 40,
      bottom: "5%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      textStyle: {
        fontSize: 24,
      },
      formatter(params:any) {
        console.log(params)
        return `${params[1].name}<br />${params[1].marker + params[1].seriesName}：${params[1].data}`;
      }
    },
    xAxis: {
      data: names,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#fff',
          fontSize: 18,
        },
        margin: 20, //刻度标签与轴线之间的距离。
      }
    },
    yAxis: {
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 18,
        },
      },
      splitLine: {
        lineStyle: {
          color: '#384267',
          width: 1,
          type: 'dashed',
        },
        show: true,
      },
    },
    series: [
      {//三个最低下的圆片
        "name": "",
        "type": "pictorialBar",
        "symbolSize": [24, 10],
        "symbolOffset": [-10, 5],
        "z": 12,
        itemStyle: {
          opacity: 1,
          color: function (params:any) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#12B9DB' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#6F8EF2'// 100% 处的颜色
            }], false)
          }
        },
        "data": [1, 1, 1, 1]
      },


      //下半截柱状图
      {
        name: '异常次数',
        type: 'bar',
        barWidth: 24,
        barGap: '-100%',
        itemStyle: {//lenged文本
          opacity: .7,
          color: function (params:any) {
            return new echarts.graphic.LinearGradient(0, 0, 0.5, 0, [{
              offset: 0,
              color: '#0e9abe' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#1acaf0'// 100% 处的颜色
            }], false)
          }
        },

        data: values
      },

      { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
        type: 'bar',
        barWidth: 45,
        barGap: '-100%',
        stack: '广告',
        itemStyle: {
          color: 'transparent'
        },
        data: values
      },
      {
        "name": "",
        "type": "pictorialBar",
        "symbolSize": [24, 10],
        "symbolOffset": [-10, -5],
        "z": 12,
        itemStyle: {
          opacity: 1,
          color: function (params:any) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#0e9abe' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#1acaf0'// 100% 处的颜色
            }], false)
          }
        },
        "symbolPosition": "end",
        "data": values
      }
    ]
  };
  chart.setOption(option,true);
};
function getAbbreviationName(name:string){
  switch (name){
    case "dfs.DataNode$PacketResponder": return "DN$PR";
    case "dfs.FSNamesystem": return "FSN";
    case "dfs.DataBlockScanner": return "DBS";
    case "dfs.DataNode$DataXceiver": return "DN$DX";
  }
}



export function bbzxFn() {
  const chart = echarts.init(document.querySelector('.chart-bbzx') as HTMLElement);
  const option = {
    "legend": {
      "show": false
    },
    "color": [
      "#00EAFF",
      "#00F6FF",
    ],
    "grid": {
      "containLabel": true,
      "left": 20,
      "right": 20,
      "bottom": 30,
      "top": 40
    },
    "xAxis": {
      "axisLabel": {
        "color": "#c0c3cd",
        "fontSize": 18,
        "interval": 0
      },
      "axisLine": {
        "lineStyle": {
          "color": "#384267",
          "width": 1,
          "type": "dashed"
        },
        "show": false
      },
      "data": [
        "设备",
        "营销",
        "数字化",
        "综合",
        "配网"
      ],
      "type": "category"
    },
    "yAxis": {
      "axisLabel": {
        "color": "#D8DBDF",
        "fontSize": 18
      },
      "splitLine": {
        "show": true,
        "lineStyle": {
          "color": "#384267",
          "type": "dashed"
        }
      },
      "axisLine": {
        "show": false
      },
      "name": ""
    },
    "series": [
      {
        "data": [
          4,
          26,
          2,
          1,
          8
        ],
        "type": "bar",
        "barMaxWidth": "auto",
        "barWidth": 30,
        "itemStyle": {
          "color": {
            "x": 0,
            "y": 0,
            "x2": 0,
            "y2": 1,
            "type": "linear",
            "global": false,
            "colorStops": [
              {
                "offset": 0,
                "color": "#00EAFF"
              },
              {
                "offset": 1,
                "color": "#00F6FF"
              }
            ]
          }
        },
        "label": {
          "show": false,
          "position": "top",
          "distance": 10,
          "color": "#fff"
        }
      },
      {
        "data": [
          1,
          1,
          1,
          1,
          1,
          1,
          1,
          1
        ],
        "type": "pictorialBar",
        "barMaxWidth": "20",
        "symbol": "diamond",
        "symbolOffset": [
          0,
          "50%"
        ],
        "symbolSize": [
          30,
          15
        ]
      },
      {
        "data": [
          4,
          26,
          2,
          1,
          8
        ],
        "type": "pictorialBar",
        "barMaxWidth": "20",
        "symbolPosition": "end",
        "symbol": "diamond",
        "symbolOffset": [
          0,
          "-50%"
        ],
        "symbolSize": [
          30,
          12
        ],
        "zlevel": 2
      }
    ]
  }
  chart.setOption(option);
  return chart
};

export function bgdzsmFn() {
  const chart = echarts.init(document.querySelector('.chart-bgdzsm') as HTMLElement);
  const option = {
    "legend": {
      "show": false
    },
    "color": [
      "#63caff",
      "#49beff",
    ],
    "grid": {
      "containLabel": true,
      "left": 20,
      "right": 20,
      "bottom": 30,
      "top": 40
    },
    "xAxis": {
      "axisLabel": {
        "color": "#c0c3cd",
        "fontSize": 18,
        "interval": 0,
        "rotate": 35
      },
      "axisLine": {
        "lineStyle": {
          "color": "#384267",
          "width": 1,
          "type": "dashed"
        },
        "show": false
      },
      "data": [
        "2022年1季度",
        "2022年2季度",
        "2022年3季度",
        "2022年4季度",
        "2023年1季度",
        "2023年2季度",
        "2023年3季度",
        "2023年4季度",
        "2024年1季度",
      ],
      "type": "category"
    },
    "yAxis": {
      max: 10,
      "axisLabel": {
        "color": "#D8DBDF",
        "fontSize": 18
      },
      "splitLine": {
        "show": true,
        "lineStyle": {
          "color": "#384267",
          "type": "dashed"
        }
      },
      "axisLine": {
        "show": false
      },
      "name": ""
    },
    "series": [
      {
        "data": [
          3,
          3,
          4,
          5,
          6,
          7,
          6,
          5,
          6,
        ],
        "type": "bar",
        "barMaxWidth": "auto",
        "barWidth": 30,
        "itemStyle": {
          "color": {
            "x": 0,
            "y": 0,
            "x2": 0,
            "y2": 1,
            "type": "linear",
            "global": false,
            "colorStops": [
              {
                "offset": 0,
                "color": "#0b9eff"
              },
              {
                "offset": 1,
                "color": "#63caff"
              }
            ]
          }
        },
        "label": {
          "show": false,
          "position": "top",
          "distance": 10,
          "color": "#fff"
        }
      },
      {
        "data": [
          1,
          1,
          1,
          1,
          1,
          1,
          1,
          1
        ],
        "type": "pictorialBar",
        "barMaxWidth": "20",
        "symbol": "diamond",
        "symbolOffset": [
          0,
          "50%"
        ],
        "symbolSize": [
          30,
          15
        ]
      },
      {
        "data": [
          3,
          3,
          4,
          5,
          6,
          7,
          6,
          5,
          6,
        ],
        "type": "pictorialBar",
        "barMaxWidth": "20",
        "symbolPosition": "end",
        "symbol": "diamond",
        "symbolOffset": [
          0,
          "-50%"
        ],
        "symbolSize": [
          30,
          12
        ],
        "zlevel": 2
      }
    ]
  }
  chart.setOption(option);
}

export function energyTop10() {
  const chart = echarts.init(document.querySelector('.energy-top10') as HTMLElement);
  var data = [
    { "code": "aaa", "stock": "aaa", "fundPost": "21.987691" },
    { "code": "bbb", "stock": "bbb", "fundPost": "20.377176" },
    { "code": "ccc", "stock": "ccc", "fundPost": "19.127404" },
    { "code": "ddd", "stock": "ddd", "fundPost": "18.40882" },
    { "code": "eee", "stock": "eee", "fundPost": "17.980597" }
  ]
  function contains(arr: any, dst: any) {
    var i = arr.length;
    while ((i -= 1)) {
      if (arr[i] == dst) {
        return i;
      }
    }
    return false;
  }


  var attackSourcesColor = [
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
      { offset: 0, color: "#EB3B5A" },
      { offset: 1, color: "#FE9C5A" }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
      { offset: 0, color: "#FA8231" },
      { offset: 1, color: "#FFD14C" }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
      { offset: 0, color: "#F7B731" },
      { offset: 1, color: "#FFEE96" }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
      { offset: 0, color: "#395CFE" },
      { offset: 1, color: "#2EC7CF" }
    ])
  ];
  var attackSourcesColor1 = [
    "#EB3B5A",
    "#FA8231",
    "#F7B731",
    "#3860FC",
    "#1089E7",
    "#F57474",
    "#56D0E3",
    "#1089E7",
    "#F57474",
    "#1089E7",
    "#F57474",
    "#F57474"
  ];
  var attaData: any = [];
  var attaName: any = [];
  var topName: any = []
  data.forEach((it, index) => {
    attaData[index] = parseFloat(it.fundPost).toFixed(2);
    attaName[index] = it.stock;
    topName[index] = `${it.code} ${it.stock}`
  });
  var salvProMax = []; //背景按最大值
  for (let i = 0; i < attaData.length; i++) {
    salvProMax.push(attaData[0]);
  }
  function attackSourcesDataFmt(sData: any) {
    var sss: any = [];
    sData.forEach(function (item: any, i: any) {
      let itemStyle = {
        color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
      };
      sss.push({
        value: item,
        itemStyle: itemStyle
      });
    });
    return sss;
  }

  var option = {
    tooltip: {
      show: false,
      textStyle: {
        fontSize: 18
      }
    },
    color: ["#F7B731"],
    legend: {
      pageIconSize: [12, 12],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
        fontSize: 22,
        color: "#fff"
      },
      show: false,
      selectedMode: false,
      data: ["个人所得(亿元)"]
    },
    grid: {
      left: 0,
      right: 0,
      width: "80%",
      bottom: "2%",
      top: 0,
      containLabel: true
    },
    xAxis: {
      type: "value",

      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisPointer: {
          label: {
            show: true,
          }
        },
        pdaaing: [5, 0, 0, 0],
        postion: "left",
        data: attaName,
        axisLabel: {
          show: false // 将排名的轴标签设置为不显示
        }
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        position: "left",
        axisLabel: {
          textStyle: {
            color: "red",
            fontSize: 18
          }
        },
        data: attackSourcesDataFmt(attaName)
      },
      {//名称
        type: 'category',
        offset: -10,
        position: "left",
        axisLine: {
          show: false
        },
        inverse: false,
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          color: ["#fff"],
          align: "left",
          verticalAlign: "bottom",
          lineHeight: 40,
          fontSize: 18
        },
        data: topName
      },
    ],
    series: [
      {
        zlevel: 1,
        name: "个人所得(亿元)",
        type: "bar",
        barWidth: "15px",
        animationDuration: 1500,
        data: attackSourcesDataFmt(attaData),
        align: "center",
        itemStyle: {
          normal: {
            barBorderRadius: 0
          }
        },
        label: {
          show: false,
          fontSize: 18,
          color: "#fff",
          textBorderWidth: 2,
          padding: [2, 0, 0, 0]
        }
      },
      {
        name: "个人所得(亿元)",
        type: "bar",
        barWidth: 15,
        barGap: "-100%",
        margin: "20",
        data: salvProMax,
        textStyle: {
          fontSize: 18,
          color: "#fff"
        },
        itemStyle: {
          normal: {
            color: "#05325F",
            fontSize: 18,
            barBorderRadius: 0
          },
        }
      }
    ]
  };
  chart.setOption(option);
}

export async function initEChartSjyxjfb(){
  const res = await axios.post("http://localhost:8080/x11");
  const chart = echarts.init(document.querySelector('.chart-sjyxjfb') as HTMLElement);
  const data = res.data.data;
  chart.setOption(
    {
      legend: {
        show: true,
        x: "center",
        y: 0,
        icon: "stack",
        itemWidth: 12,
        itemHeight: 6,
        itemGap: 50,
        textStyle: {
          color: "#D8DBDF",
          fontSize: 24
        },
        data: ["次数","次数-圆柱"],
      },
      tooltip: {
        show: true,
        trigger: "axis",
        textStyle: {
          fontSize: 24,
        },
        formatter(params) {
          return `${params[0].name}<br />${params[0].marker + params[0].seriesName}：${params[0].data}`;
        }
      },
      grid: {
        left: 0,
        right: 0,
        bottom: '3%',
        containLabel: true
      },
      // 设置颜色
      color: [
        new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            {
              offset: 0,
              color: '#62FDCF' // 渐变起始颜色
            },
            {
              offset: 1,
              color: '#43C8F6' // 渐变结束颜色
            }
          ]
        ),
        new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            {
              offset: 0,
              color: '#355FF2' // 渐变起始颜色
            },
            {
              offset: 1,
              color: '#43C8F6' // 渐变结束颜色
            }
          ]
        )
      ],
      // x轴数据
      xAxis: {
        type: 'category',
        data: data.names,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#384267",
          },
        },
        axisLabel: {
          fontSize: 18,
          color: '#D8DBDF'
        }
      },
      // y轴数据
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            color: '#384267',
            width: 1,
            type: 'dashed',
          },
          show: true,
        },
        axisLabel: {
          fontSize: 18,
          color: '#D8DBDF'
        }
      },
      // 折线图
      series: [{
        name: '次数',
        type: 'line',
        barWidth: '16',
        data: data.values,
        lineStyle: {
          width: 4
        }
      }, {
        name: '次数-圆柱',
        type: 'bar',
        barWidth: '16', // 柱子宽度
        data: data.values
      }]
    },true
  );
}

export async function initAbnormalEventLocationRelationshipData() {
  const chart = echarts.init(document.querySelector('.chart-abnormal-event-location-relationship') as HTMLElement);
  // let military_statistics_data1 = [220, 100, 250, 145, 240, 130, 325, 155, 340, 250, 345, 240,];
  // let military_statistics_data2 = [310, 325, 155, 340, 110, 345, 240, 135, 325, 155, 340, 250,];
  let military_statistics_data: any[] = [];
  let military_statistics_names: any[] = [];
  const res = await axios.post("http://localhost:8080/x10");

  military_statistics_data = res.data.data.values
  military_statistics_names = res.data.data.names

  let data = [
    { value: 62, name: "视频广告" },
    { value: 243, name: "搜索引擎" }
  ];

  // const military_statistics_data3 = [345, 240, 135, 325, 155, 340, 250, 345, 240, 135, 325, 155];
  var fontColor = "#D8DBDF";
  chart.setOption(
    {
      legend: {
        show: true,
        x: "center",
        y: 0,
        icon: "stack",
        itemWidth: 12,
        itemHeight: 6,
        itemGap: 50,
        textStyle: {
          color: "#D8DBDF",
          fontSize: 22
        }
      },
      tooltip: {
        show:true,
        textStyle: {
          fontSize: 28
        }
      },
      grid: {
        left: 0,
        right: 0,
        bottom: '8%',
        containLabel: true
      },
      // 设置颜色
      color: [
        // new echarts.graphic.LinearGradient(
        //   0, 0, 0, 1,
        //   [
        //     {
        //       offset: 0,
        //       color: '#62FDCF' // 渐变起始颜色
        //     },
        //     {
        //       offset: 1,
        //       color: '#43C8F6' // 渐变结束颜色
        //     }
        //   ]
        // ),
        new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            {
              offset: 0,
              color: '#355FF2' // 渐变起始颜色
            },
            {
              offset: 1,
              color: '#43C8F6' // 渐变结束颜色
            }
          ]
        )
      ],
      // x轴数据
      xAxis: {
        type: 'category',
        data: military_statistics_names,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#384267",
          },
        },
        axisLabel: {
          fontSize: 18,
          color: '#D8DBDF'
        }
      },
      // y轴数据
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            color: '#384267',
            width: 1,
            type: 'dashed',
          },
          show: true,
        },
        axisLabel: {
          fontSize: 18,
          color: '#D8DBDF'
        }
      },
      // 折线图
      series: [{
        name: '位置',
        type: 'bar',
        barWidth: '46', // 柱子宽度
        data: military_statistics_data
      }]
    },true
  );
}

export async function sjlxblsxFn() {
  const colorList = ['#e75f7c','#0abb51','#50cbfd','#f2e900','#ed7500','#fe0534'];
  const res = await axios.post("http://localhost:8080/x12");
  const result = res.data.data;
  const data:any[] = [];
  result.dtos.forEach((item:any,index:number)=>{
    data.push({
      name: item.name,
      value: item.value,
      itemStyle: {
        color: colorList[index],
      },
    })
  })
  const chart = echarts.init(document.querySelector('.chart-rizhi-sjlxblsx') as HTMLElement);
  const option = getPie3D(
      data,0.7
  );
  chart.setOption(option,true);
}

function getParametricEquation(startRatio:any, endRatio:any, isSelected:any, isHovered:any, k:any, h:any) {
  // 计算
  let midRatio = (startRatio + endRatio) / 2;

  let startRadian = startRatio * Math.PI * 2;
  let endRadian = endRatio * Math.PI * 2;
  let midRadian = midRatio * Math.PI * 2;

  // 如果只有一个扇形，则不实现选中效果。
  // if (startRatio === 0 && endRatio === 1) {
  //     isSelected = false;
  // }
  isSelected = false;
  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== 'undefined' ? k : 1 / 3;

  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;

  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1;

  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },

    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },

    x: function (u:any, v:any) {
      if (u < startRadian) {
        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    y: function (u:any, v:any) {
      if (u < startRadian) {
        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    z: function (u:any, v:any) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * h * 0.1;
      }
      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
    },
  };
}

// 生成模拟 3D 饼图的配置项
function getPie3D(pieData:any, internalDiameterRatio:any) {
  let series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  let legendData:any[] = [];
  let linesSeries:any[] = []; // line3D模拟label指示线
  let k =
      typeof internalDiameterRatio !== 'undefined'
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3;

  // 为每一个饼图数据，生成一个 series-surface 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value;

    let seriesItem:any = {
      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k: 1 / 10,
      },
    };

    if (typeof pieData[i].itemStyle != 'undefined') {
      let itemStyle:any = {};

      typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
      typeof pieData[i].itemStyle.opacity != 'undefined'
          ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
          : null;

      seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }

  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value;

    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    series[i].parametricEquation = getParametricEquation(
        series[i].pieData.startRatio,
        series[i].pieData.endRatio,
        false,
        false,
        k,
        series[i].pieData.value
    );

    startValue = endValue;

    // 计算label指示线的起始和终点位置
    let midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI;
    let posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2));
    let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2));
    let posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.1;
    let flag = ((midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= 3 * Math.PI / 2 && midRadian <= Math.PI * 2)) ? 1 : -1;
    let color = pieData[i].itemStyle.color;
    let turningPosArr = [posX * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (2)]
    let endPosArr = [posX * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (6)]
    linesSeries.push({
          type: 'line3D',
          lineStyle: {
            color: color,
          },
          data: [[posX, posY, posZ], turningPosArr, endPosArr]
        },
        {
          type: 'scatter3D',
          label: {
            show: true,
            distance: 0,
            position: 'center',
            textStyle: {
              color: '#ffffff',
              backgroundColor: color,
              borderWidth: 2,
              fontSize: 14,
              padding: 10,
              borderRadius: 4,
            },
            formatter: '{b}'
          },
          symbolSize: 0,
          data: [{ name: series[i].name + '\n' + series[i].pieData.value, value: endPosArr }]
        });

    legendData.push(series[i].name);
  }
  series = series.concat(linesSeries)

  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
  series.push({
    name: 'mouseoutSeries',
    type: 'surface',
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: '#E1E8EC',
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 20,
      },
      x: function (u:any, v:any) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
      },
      y: function (u:any, v:any) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
      },
      z: function (u:any, v:any) {
        return Math.cos(v) > 0 ? -0.5 : -5;
      },
    },
  });

  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
  series.push({
    name: 'mouseoutSeries',
    type: 'surface',
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: '#E1E8EC',
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 20,
      },
      x: function (u:any, v:any) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
      },
      y: function (u:any, v:any) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
      },
      z: function (u:any, v:any) {
        return Math.cos(v) > 0 ? -5 : -7;
      },
    },
  });
  series.push({
    name: 'mouseoutSeries',
    type: 'surface',

    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: '#E1E8EC',
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 20,
      },
      x: function (u:any, v:any) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
      },
      y: function (u:any, v:any) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
      },
      z: function (u:any, v:any) {
        return Math.cos(v) > 0 ? -7 : -7;
      },
    },
  });

  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    //animation: false,
    //background:'#000',

    legend: {
      //left: '50%',
      //top: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 18,
      },
      // icon:'diamond',
      data: legendData,
      formatter: (params:any) => {
        return params;
      },
    },
    tooltip: {
      textStyle:{
        fontSize: 28
      },
      formatter: (params:any) => {
        if (params.seriesName !== 'mouseoutSeries') {
          return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;
        }
      }
    },
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: {},
    grid3D: {
      viewControl: {
        //3d效果可以放大、旋转等，请自己去查看官方配置
        // autoRotateDirection: 'ccw',
        projection: 'perspective', // 先设置为这个perspective
        distance : 100,
        // distant: 100,
        // alpha: 40,
        // beta: 40,
        // rotateSensitivity: 1,
        // zoomSensitivity: 1,
        // panSensitivity: 0,
        autoRotate: true
      },
      left: 'center',
      width: '100%',
      show: false,
      boxHeight: 50,
      // boxDepth: 50

    },
    series: series,
  };
  return option;
}
